<script lang="ts" setup>
interface Props {
  activeTab: Numberish
  tabsData: any
  tabName: string
  maxTabNum?: number
}

const {
  activeTab,
  tabsData,
  tabName,
  maxTabNum = 5
} = defineProps<Props>();

const showMore = ref(false);

const initStyle = computed(() => {
  return {
    '--vc-descriptions-tabs-overflow': 'hidden',
    '--vc-descriptions-tabs-height': tabsData?.length === 1 ? '0' : '22px',
    '--vc-descriptions-tabs-mb': tabsData?.length === 1 ? '0' : '7px'
  };
});

const tabStyle = computed(() => {
  return showMore.value ? {
    '--vc-descriptions-tabs-overflow': 'visible',
    '--vc-descriptions-tabs-height': 'auto',
    '--vc-descriptions-tabs-mb': '7px'
  } : initStyle.value;
});

const onShowMore = () => {
  showMore.value = !showMore.value;
};
</script>

<template>
  <vc-tabs :model-value="activeTab"
    type="card" class="inline-block descriptions w-full" :style="tabStyle">
    <vc-tab-pane v-for="(item, index) in tabsData" :key="index"
      :label="item[tabName]" :name="index" >
      <slot :item="item" :index="index"/>
    </vc-tab-pane>
    <template #headerRight>
      <slot name="tabsRight"/>
      <div v-if="tabsData?.length > maxTabNum" @click="onShowMore" class="ml-5px mt-2px flex text-[#1382EF] text-13px cursor-pointer">
        <vc-icon
          :style="{transform: `rotate(${showMore ? '180deg' : 0})`}"
          icon="vi-arrow-down" color="#02C680"/>
        <div class="text-12px w-max text-#02C680">{{ showMore ? '收起' : '更多' }}</div>
      </div>
    </template>
  </vc-tabs>
</template>

<style lang="scss" scoped>
.descriptions {
  :deep(.vc-tabs__header) {
    height: var(--vc-descriptions-tabs-height);
    overflow: var(--vc-descriptions-tabs-overflow);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--vc-descriptions-tabs-mb);

    .vc-tabs__nav {
      width: 95%;
      flex-wrap: wrap;
    }
    
    .vc-tabs__nav-wrap {
      width: 100%;
    }

    .vc-tabs__item:nth-child(n + 6) {
      margin-top: 8px;
    }
  }
}
</style>
